<template>

  <div v-for="(item,index) in tableData" :key="index" style="margin-bottom: 10px">

    <el-form
        :inline="true"
        label-position="right"
        label-width="120px"
    >

      <el-row :gutter="20" style="width:100%">

        <el-col :span="8">
          <el-form-item label="分配人：">
            {{ item.creatorName }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="分配时间：">
            {{ dateFormat('yyyy-mm-dd HH:MM', item.createdAt) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="分配跟进职员：">
            {{ item.headName }}
          </el-form-item>
        </el-col>

        <el-col v-if="item.ifAccept == 1" :span="8">
          <el-form-item label="职员接受时间：">
            {{ dateFormat('yyyy-mm-dd HH:MM', item.dealTime) }}
          </el-form-item>
        </el-col>

        <el-col v-if="item.ifAccept == 2" :span="8">
          <el-form-item label="职员拒绝时间：">
            {{ dateFormat('yyyy-mm-dd HH:MM', item.dealTime) }}
          </el-form-item>
        </el-col>

        <el-col v-if="item.ifAccept == 2" :span="8">
          <el-form-item label="职员拒绝原因：">
            {{ item.refuseReason }}
          </el-form-item>
        </el-col>

        <el-col v-if="item.lfailTime" :span="8">
            <el-form-item label="职员拒绝时间：">
              {{ dateFormat('yyyy-mm-dd HH:MM', item.failTime) }}
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <el-table v-if="type == 1 || type == 2" :data="item.allocationAgentDetails" border size="medium" @row-click="rowClick" header-cell-class-name="table-header">
      <el-table-column type="index"/>
      <el-table-column
          :show-overflow-tooltip="true"
          align="left"
          header-align="center"
          label="代理名称"
          prop="agentName"
      />
      <el-table-column
          :show-overflow-tooltip="true"
          align="left"
          header-align="center"
          label="所在地区"
      >
        <template #default="{row}">
          <span v-if="row.agentType == 'agent'">{{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}</span>
          <span v-else>{{ row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          align="center"
          header-align="center"
          label="代理商状态"
      >
        <template #default="{row}">
          <!--        <span v-if="row.tradeStatus == 1">正式代理商</span>-->
          <!--        <span v-else>准代理商</span>-->
          {{ getLabel('agent_status_person', row?.agentStatus) }}
        </template>
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          align="center"
          header-align="center"
          label="开发跟进期限"
      >
        <template #default="{row}">
          {{ dateFormat('yyyy-mm-dd', row.dealTime) }}
        </template>
      </el-table-column>
    </el-table>

    <el-table v-else-if="type == 4" :data="item.allocationAgentDetails" border size="medium" @row-click="rowClick" header-cell-class-name="table-header">
      <el-table-column type="index" label="序号" width="55"/>
      <el-table-column
              :show-overflow-tooltip="true"
              align="left"
              header-align="center"
              label="商销客户名称"
              prop="sellerName"
      />
      <el-table-column
              :show-overflow-tooltip="true"
              align="left"
              header-align="center"
              label="所在地区"
      >
        <template #default="{row}">
          <span>{{ row.selProvinceName }}/{{ row.selCityName }}/{{ row.selAreaName }}</span>
        </template>
      </el-table-column>
      <el-table-column
              :show-overflow-tooltip="true"
              align="center"
              header-align="center"
              label="客户状态"
      >
        <template #default="{row}">
          {{ getLabel('seller_status', row.sellerStatus) }}
        </template>
      </el-table-column>
      <el-table-column
              :show-overflow-tooltip="true"
              align="center"
              header-align="center"
              label="开发跟进期限"
      >
        <template #default="{row}">
          {{ dateFormat('yyyy-mm-dd', row.dealTime) }}
        </template>
      </el-table-column>
    </el-table>

  </div>

  <detail-drawer ref="detailDrawer" :size-width="1000" custom-title>
    <template #title>

      <div>
        <span v-if="datas.agentType == 'agent'">代理商 - </span>
        <span v-else>兼职 - </span>
        <span class="drawerTitle">{{ datas.agentName }}</span>
      </div>

    </template>
    <template #contents>

      <agentInfo :id="datas.agentId"/>

    </template>
  </detail-drawer>

  <detail-drawer ref="detailDrawer1" :size-width="1000" custom-title>
    <template #title>

      <div>
        <span>商销客户 - </span>
        <span class="drawerTitle">{{ datas.sellerName }}</span>
      </div>

    </template>
    <template #contents>

      <sellerInfo :id="datas.sellerId"/>

    </template>
  </detail-drawer>

</template>

<script>
import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onMounted, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'AgentHistoryView',
  components: {
    agentInfo: defineAsyncComponent(() =>
        import('../agent/agentInfo.vue')
    ),
    sellerInfo: defineAsyncComponent(() =>
            import('../seller/sellerInfo.vue')
    ),
  },
  props: {
    id: {
      type: Number,
      default: 0
    },
    type:{
      type:String,
      default:'1'
    }
  },
  setup(props, {}) {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    var data = reactive({
      tableData: [],
      detailDrawer: null,
      detailDrawer1:null,
      datas: {}
    })

    const onClick = (item) => {
      data.datas = item
      data.detailDrawer.open()
    }

    const rowClick = (row) => {
      data.datas = row
      if (props.type == 4){
        data.detailDrawer1.open()
      }else {
        data.detailDrawer.open()
      }
    }

    onMounted(() => {
      api.plan.ALLOCATIONAGENT_FAIL_LIST(props.id).then(res => {
        if (!res.code) {
          data.tableData = res.data
        } else {
          currentInstance.proxy.customMessage({type: 'error', message: res.msg})
        }
      }).catch(err => {

      })
    })

    return {
      ...toRefs(data),

      onClick,
      rowClick,
    }
  }
})
</script>

<style scoped>

</style>
